﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Dribble Ball</title>
    <link rel="stylesheet" href="../css/db.css" />
    <link rel="stylesheet" href="../css/colorbox.css" />
    <style>
        #score
        {
            font-size: 160px;
            text-anchor: middle;
            stroke-width: 0;
            fill: gray;
            opacity: 0.1;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
    </style>
     <script type="text/javascript" src="../js/track.js"/>
</head>
<body>
    <div id="status">
        <div id="counter">
        </div>
    </div>
    <div id="win1">
        <svg xmlns="http://www.w3.org/2000/svg" width="600" height="800" version="1.1">
            <defs>
                <marker id="mTriangle" markerWidth="50" markerHeight="100" refX="50" refY="50" orient="auto">
                    <path d="M 0 0 50 50 0 100 Z" style="fill: black;" />
                </marker>
            </defs>
            <g id="back">
                <text id="score" y="190" x="400">
                </text>
            </g>
            <g id="main">
                <line x1="0" y1="0" x2="0" y2="800" db-pad="wood" />
                <line x2="600" y2="0" x1="600" y1="800" db-pad="wood" />
                <line x2="600" y2="0" x1="0" y1="0" db-pad="bad" />
                <line x1="0" y1="800" x2="600" y2="800" db-pad="bad" />
                <line class="moving" x1="200" y1="800" x2="400" y2="800" db-pad="wood" db-bi="1" />
                <line class="moving" x1="50" y1="950" x2="250" y2="950" db-pad="wood" db-bi="1" />
                <line class="moving" x1="350" y1="950" x2="550" y2="950" db-pad="wood" db-bi="1" />
            </g>
            <rect id="dummy" width="100%" height="100%" fill-opacity="0">
            </rect>
            <g id="front">
            </g>
        </svg>
    </div>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/jquery.countdown.js"></script>
    <script type="text/javascript" src="../js/jquery.colorbox.js"></script>
    <script type="text/javascript" src="../js/svg.js"></script>
    <script type="text/javascript" src="../js/db.js"></script>
    <script type="text/javascript">
        //<![CDATA[
        $(function () {
            db.gameEnded = function (win) {
                if (!db.isEnded) {
                    db.pause = true;
                    clearInterval(gameIterval);
                    db.isEnded = true;
                    var html = "<img style='height:155px; width:125px; margin-left:107px' src='../img/break.jpg'/><br/>" + db.getPopControls({ upLink: "../main.xhtml" });
                    $.colorbox({ width: 400, height: 500, overlayClose: false, html: html });
                }
            };
            db.isInBoundary = function () {
                return true;
            };
            initMap();
            var speed = 1.5;
            var gap = 120;
            var interval = 1000 * gap / speed / 50;
            $("[class='moving']").attr("db-speed-y", -speed);
            db.setTimer(null, function () {
                $("line[class='moving']").each(function () {

                    var y = parseFloat($(this).attr("y1"));
                    if (y < 0)
                        $(this).remove();
                    else {
                        $(this).attr("y1", y - speed);
                        $(this).attr("y2", y - speed);
                    }
                });

                $("circle[class='moving']").each(function () {

                    var y = parseFloat($(this).attr("cy"));
                    if (y < 0)
                        $(this).remove();
                    else {
                        $(this).attr("cy", y - speed);
                    }
                });
            });

            var level = 1;
            var gameIterval = setInterval(function () {
                var pads = [];
                switch (level) {
                    case 1:
                        x1 = Math.floor((Math.random() * 400) + 0);
                        pads.push(convertStringToSvg('<line class="moving" x1="' + x1 + '" y1="950" x2="' + (x1 + 180) + '" y2="950" db-pad="ground" db-bi="1"/>'));
                        break;
                    case 2:
                        x1 = Math.floor((Math.random() * 400) + 0);
                        if (Math.random() < 0.5) {
                            pads.push(convertStringToSvg('<circle class="moving" cx="' + x1 + '" cy="950" r="8" db-pad="wood"/>'));
                            pads.push(convertStringToSvg('<circle class="moving" cx="' + (x1 + 30) + '" cy="950" r="8" db-pad="wood"/>'));
                            pads.push(convertStringToSvg('<circle class="moving" cx="' + (x1 + 60) + '" cy="950" r="8" db-pad="wood"/>'));
                            pads.push(convertStringToSvg('<circle class="moving" cx="' + (x1 + 90) + '" cy="950" r="8" db-pad="wood"/>'));
                        }
                        else
                            pads.push(convertStringToSvg('<line class="moving" x1="' + x1 + '" y1="950" x2="' + (x1 + 180) + '" y2="950" db-pad="ground" db-bi="1"/>'));
                        break;
                    case 3:
                        x1 = Math.floor((Math.random() * 400) + 0);
                        if (Math.random() < 0.4)
                            pads.push(convertStringToSvg('<line class="moving" x1="' + x1 + '" y1="950" x2="' + (x1 + 180) + '" y2="950" db-pad="ice" db-bi="1"/>'));
                        else
                            pads.push(convertStringToSvg('<line class="moving" x1="' + x1 + '" y1="950" x2="' + (x1 + 160) + '" y2="950" db-pad="ground" db-bi="1"/>'));
                        break;
                    case 4:
                        x1 = Math.floor((Math.random() * 430) + 0);
                        var r = Math.random();
                        if (r < 0.4)
                            pads.push(convertStringToSvg('<line class="moving" x1="' + x1 + '" y1="950" x2="' + (x1 + 150) + '" y2="950" db-pad="ice" db-bi="1"/>'));
                        else if (r >= 0.4 && r < 0.8) {
                            pads.push(convertStringToSvg('<circle class="moving" cx="' + x1 + '" cy="950" r="8" db-pad="wood"/>'));
                            pads.push(convertStringToSvg('<circle class="moving" cx="' + (x1 + 30) + '" cy="950" r="8" db-pad="wood"/>'));
                            pads.push(convertStringToSvg('<circle class="moving" cx="' + (x1 + 60) + '" cy="950" r="8" db-pad="wood"/>'));
                        }
                        else
                            pads.push(convertStringToSvg('<line class="moving" x1="' + x1 + '" y1="950" x2="' + (x1 + 150) + '" y2="950" db-pad="ground" db-bi="1"/>'));
                        break;
                    case 5:
                        x1 = Math.floor((Math.random() * 430) + 0);
                        r = Math.random();
                        if (r < 0.3)
                            pads.push(convertStringToSvg('<line class="moving" x1="' + x1 + '" y1="950" x2="' + (x1 + 150) + '" y2="950" db-pad="ice" db-bi="1"/>'));
                        else if (r >= 0.3 && r < 0.6) {
                            pads.push(convertStringToSvg('<circle class="moving" cx="' + x1 + '" cy="950" r="8" db-pad="wood"/>'));
                            pads.push(convertStringToSvg('<circle class="moving" cx="' + (x1 + 60) + '" cy="950" r="8" db-pad="wood"/>'));
                        }
                        else
                            pads.push(convertStringToSvg('<line class="moving" x1="' + x1 + '" y1="950" x2="' + (x1 + 130) + '" y2="950" db-pad="ground" db-bi="1"/>'));
                        break;
                    case 6:
                        x1 = Math.floor((Math.random() * 430) + 0);
                        r = Math.random();
                        if (r < 0.3)
                            pads.push(convertStringToSvg('<line class="moving" x1="' + x1 + '" y1="950" x2="' + (x1 + 150) + '" y2="950" db-pad="ice" db-bi="1"/>'));
                        else if (r >= 0.3 && r < 0.6) {
                            pads.push(convertStringToSvg('<circle class="moving" cx="' + x1 + '" cy="950" r="8" db-pad="ground"/>'));
                            pads.push(convertStringToSvg('<circle class="moving" cx="' + (x1 + 60) + '" cy="950" r="8" db-pad="ground"/>'));
                        }
                        else  {
                            pads.push(convertStringToSvg('<line class="moving" x1="' + x1 + '" y1="950" x2="' + (x1 + 130) + '" y2="950" db-pad="ground" db-bi="1"/>'));
                        }
                        break;
                    case 7:
                        x1 = Math.floor((Math.random() * 450) + 0);
                        r = Math.random();
                        if (r < 0.3)
                            pads.push(convertStringToSvg('<line class="moving" x1="' + x1 + '" y1="950" x2="' + (x1 + 150) + '" y2="950" db-pad="ice" db-bi="1"/>'));
                        else if (r >= 0.3 && r < 0.6) {
                            pads.push(convertStringToSvg('<circle class="moving" cx="' + x1 + '" cy="950" r="8" db-pad="ground"/>'));
                            pads.push(convertStringToSvg('<circle class="moving" cx="' + (x1 + 70) + '" cy="935" r="8" db-pad="ground"/>'));
                            pads.push(convertStringToSvg('<circle class="moving" cx="' + (x1 + 140) + '" cy="950" r="8" db-pad="ground"/>'));
                        }
                        else if (r >= 0.6 && r < 0.9) {
                            pads.push(convertStringToSvg('<line class="moving" x1="' + x1 + '" y1="950" x2="' + (x1 + 130) + '" y2="950" db-pad="ground" db-bi="1"/>'));
                        }
                        else
                            pads.push(convertStringToSvg('<circle class="moving" cx="' + x1 + '" cy="950" r="15" db-pad="bad"/>'));
                        break;
                    case 8:
                        x1 = Math.floor((Math.random() * 450) + 0);
                        r = Math.random();
                        if (r < 0.3)
                            pads.push(convertStringToSvg('<line class="moving" x1="' + x1 + '" y1="950" x2="' + (x1 + 130) + '" y2="950" db-pad="ice" db-bi="1"/>'));
                        else if (r >= 0.3 && r < 0.6) {
                            pads.push(convertStringToSvg('<circle class="moving" cx="' + x1 + '" cy="950" r="8" db-pad="ground"/>'));
                            pads.push(convertStringToSvg('<circle class="moving" cx="' + (x1 + 70) + '" cy="935" r="8" db-pad="ground"/>'));
                            pads.push(convertStringToSvg('<circle class="moving" cx="' + (x1 + 140) + '" cy="950" r="8" db-pad="ground"/>'));
                        }
                        else if (r >= 0.6 && r < 0.9) {
                            pads.push(convertStringToSvg('<line class="moving" x1="' + x1 + '" y1="950" x2="' + (x1 + 130) + '" y2="950" db-pad="ground" db-bi="1"/>'));
                        }
                        else
                            pads.push(convertStringToSvg('<circle class="moving" cx="' + x1 + '" cy="950" r="15" db-pad="bad"/>'));
                        break;
                    default:
                        x1 = Math.floor((Math.random() * 400) + 0);
                        if (Math.random() < 0.5)
                            pads.push(convertStringToSvg('<line class="moving" x1="' + x1 + '" y1="950" x2="' + (x1 + 120) + '" y2="950" db-pad="ice" db-bi="1"/>'));
                        else
                            pads.push(convertStringToSvg('<line class="moving" x1="' + x1 + '" y1="950" x2="' + (x1 + 80) + '" y2="950" db-pad="bad" db-bi="1"/>'));
                        break;
                }

                var l = pads.length;
                for (var i = 0; i < l; i++) {
                    initPaddle(pads[i]);
                    pads[i].attr("db-speed-y", -speed);
                    $("#main").append(pads[i]);
                }
            }, interval);


            setInterval(function () { level++ }, 20000);
            var score = 0;
            setInterval(function () {
                $("#score").html(++score);
            }, 1000);

            var ball = new Ball();
            ball.init(300, 200);
        });
        //]]>
    </script>
</body>
</html>
